<template>
    <view class="storePage d-flex f-column" :style="{'--color': color}">
       <!-- <status-bar title='选择门店'></status-bar> -->
        <view class="search viewbox bgf8 margin20 d-flex a-center">
            <view class="d-flex a-center" @click="toUrl('/orderPage/Addresslist/cityList')">
                <text class="size26 bold p-right6">{{ cityName }}</text>
                <text class="iconfont icon-xiasanjiaoxing h6"></text>
            </view>
            <view class="line"></view>
            <text class="iconfont icon-btn_search m-right10"></text>
            <input class="flex-1 size28" v-model="keywords" confirm-type="search" placeholder="输入门店名称或地址搜索"
                @focus="isFlag = false" @confirm="handleConfirm" />
            <view class="size28 color_44 p-left20" @click="handleCancel" v-if="!isFlag">取消</view>
        </view>
        <block v-if="isFlag">
            <!-- 地图组件 -->
            <map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" show-location v-if="!isFold">
            </map>
            <view class="p-left8 p-bot24 p-top24 p-re">
                <u-tabs :list="tabList" :current="current" :lineColor="color" @click="tabClick"></u-tabs>
                <view class="toggle padding20 color_66 p-ab" @click="isFold = !isFold">
                    <text class="m-right10">{{ isFold ? '展开' : '收起' }}地图</text>
                    <text class="iconfont h6" :class="isFold ? 'icon-xiangxia' : 'icon-xiangshang'"></text>
                </view>
            </view>
            <view class="flex-1 bgf8 padding30" style="overflow-y: auto;">
                <view class="bor_radius_18 padding40-30 m-bot20 d-flex p-re" :class="item.can_choose == 1 ? 'bgwhite' : 'notSelected'"   
                    @click="handleSelect(item)" v-for="(item,index) in nearList" :key="index">
                    <view class="label p-ab thmeBg white padding2-14 bor_radius_6" v-if="!index && !is_collect">距离最近</view>
                    <view class="flex-1 p-right30">
                        <view class="size30 bold m-bot20" :class="item.can_choose == 1 ? 'color_33' : 'color_66'">{{ item.name }}</view>
                        <view class="h6 color_99">{{ item.address }}</view>
                        <view class="h6 color_99 m-top10" v-if="item.runTime">营业时间：{{ item.runTime }}</view>
                    </view>
                    <view class="text-right">
                        <view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
                        <view class="m-top40">
                            <view class="btn bgf8 m-right30" v-if="item.phone" @click.stop="$common.Tel(item.phone)">
                                <text class="iconfont icon-dianhua size30"></text>
                            </view>
                            <view class="btn bgf8" @click.stop="locate(item)">
                                <text class="iconfont icon-wodeluxian size30"></text>
                            </view>
                        </view>
                    </view>
                </view>

                <emptys v-if="noData" title="暂无相关的门店数据哦~"></emptys>
            </view>
        </block>
        <view class="flex-1 bgf8 padding30" style="overflow-y: auto;" v-else>
            <view class="bgwhite bor_radius_18 padding40-30 m-bot20 d-flex" @click="handleSelect(item)"
                v-for="(item,index) in searchList" :key="index">
                <view class="flex-1 p-right30">
                    <view class="size30 color_33 bold m-bot20">{{ item.name }}</view>
                    <view class="h6 color_99">{{ item.address }}</view>
                    <view class="h6 color_99 m-top10" v-if="item.runTime">营业时间：{{ item.runTime }}</view>
                </view>
                <view class="text-right">
                    <view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
                    <view class="m-top40">
                        <view class="btn bgf8 m-right30" v-if="item.phone" @click.stop="$common.Tel(item.phone)">
                            <text class="iconfont icon-dianhua size30"></text>
                        </view>
                        <view class="btn bgf8" @click.stop="locate(item)">
                            <text class="iconfont icon-wodeluxian size30"></text>
                        </view>
                    </view>
                </view>
            </view>

            <emptys v-if="noData1" empty="search" title="暂无相关结果，请尝试更换关键字"></emptys>
        </view>
    </view>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
// import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
// let qqmapsdk
export default {
    data(){
        return {
            cityName: '重庆',
            keywords: '',
            isFlag: true, // 搜索中为false
            isFold: false,
            longitude: 0, // (距离最近)标记点的经纬度
            latitude: 0,
            markers: [],
            tabList: [
                { name: '附近' },
                { name: '收藏' }
            ],
            current: 0,
            nearList: [],
            searchList: [],
            is_collect: '',
            noData: false,
            noData1: false,
            shopsid: '',
			sourceLogin:0, //1 来源登录选择门店
        }
    },
    computed: {
        ...mapState(['position','CityInfo','color'])
    },
    onLoad(opt){
		if(opt.shopsid) this.shopsid = opt.shopsid;
		if(opt.sourceLogin){
			this.tabList.splice(1,1)
			this.sourceLogin = opt.sourceLogin;
		} 
       
    },
    async onShow(){
        await this.$pop.getLocation()
        if(this.CityInfo) this.cityName = this.CityInfo.name
        this.getList()
    },
    methods: {
		...mapMutations(['getUser']),
        getList(){
            this.noData = false
            this.markers = []
            this.$http.post({
                url: '/singleSaleApi/shopList',
                data: {
                    // bussId: '',
                    sort_type: 'distance',
                    is_collect: this.is_collect,
                    city: this.cityName,
					shopsid:this.shopsid
                }
            }).then(res=>{
                this.nearList = res.data || []
                if(!this.nearList.length) return this.noData = true
                // 添加标记点
                this.markers = this.nearList.map(item=>{
                    return {
                        id: parseFloat(item.shop_id),
                        latitude: parseFloat(item.pointy),
                        longitude: parseFloat(item.pointx),
                        iconPath: this.$imgUrls(item.logo),
                        width: 30,
                        height: 30,
                        callout: {
                            content: item.name,
                            borderRadius: 2,
                            padding: 5,
                            display: 'ALWAYS'
                        }
                    }
                })
                this.longitude = this.markers[0].longitude
                this.latitude = this.markers[0].latitude
            })
        },
        tabClick({index}){
            this.is_collect = index || ''
            this.current = index
            this.getList()
        },
        handleCancel(){
            this.isFlag = true
            this.keywords = ''
            this.searchList = []
        },
        locate(item){
            uni.openLocation({
                latitude: parseFloat(item.pointy),
                longitude: parseFloat(item.pointx),
                name: item.name,
                address: item.address,
                complete(res){
                    console.log(res)
                }
            })
        },
        handleConfirm(e){
            if(!e.detail.value) return
            this.noData1 = false
            this.$http.post({
                url: '/singleSaleApi/shopList',
                data: {
                    // bussId: '',
                    sort_type: 'distance',
                    keywords: this.keywords,
                    city: this.cityName,
					shopsid:this.shopsid
                }
            }).then(res=>{
                this.searchList = res.data || []
                if(!this.searchList.length) this.noData1 = true 
            })

            // let that = this
            // qqmapsdk.search({ // 周边搜索
            //     keyword: e.detail.value,
            //     location: `${that.latitude},${that.longitude}`,
            //     region: that.cityName,
            //     auto_extend: '0', // 不扩大范围
            //     success(res){
            //         that.searchList = res.data || []
            //     }
            // })
        },
        handleSelect(item){
            if(!item.can_choose) return
            let pages = getCurrentPages()
			console.log(pages,'pages');
            let prevPage = pages[pages.length - 2]
			console.log(prevPage,'prevPage');
            prevPage.onLoad({shop_id: item.shop_id})
			if(this.sourceLogin == 1) this.getUser({bind_store: item})
            this.$back()
            // this.$rectTo('/pages/classify/repast?shop_id=' + item.shop_id)
        },
        handleReturn(){
            // 必须申请调用getLocation
            uni.createMapContext('myMap', this).moveToLocation({
                longitude: this.position.longitude,
                latitude: this.position.latitude
            })
        },
        reverseGeocoder(lat,lng){
            let that = this
            qqmapsdk.reverseGeocoder({ // 逆地址解析(坐标转地址)
                location: `${lat},${lng}`,
                get_poi: 1,
                success(res){
                    if(res.status != 0) return that.$Toast(res.message)
                    that.cityName = res.result.ad_info.city // 初始化要用经纬度换取城市
                    that.nearList = res.result.pois || []
                }
            })
        },
        regionchange(e){ 
            console.log('触发', e)
            if(e.type == 'end'){ // 拖动结束
                const result = e.detail.centerLocation
                this.reverseGeocoder(result.latitude, result.longitude)
            }       
        }
    }
}
</script>

<style lang="scss" scoped>
.storePage {
    height: 100vh;
}
.search {
    height: 72rpx;
    border-radius: 36rpx;
    padding: 0 30rpx;
    .line {
        width: 1rpx;
        height: 30rpx;
        background: #999;
        margin: 0 20rpx;
    }
}
#myMap {
    width: 100%;
    height: 500rpx;
    position: relative;
}
.control {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 20rpx;
    bottom: 50rpx;
}
.toggle {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.btn {
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 50%;
    text-align: center;
}
.label {
    top: -10rpx;
    right: -4rpx;   
}
.notSelected {
    background: #f6f6f6 !important;
    border: 1rpx solid #eee;
}
</style>